<template>
   <div>
        <div id="Header">
            <!--nav-->
            <div class="Header-nav">
                <span class="t_left">Having trouble viewing email? <a href="#">View it in your browser</a></span>
                <span class="t_right">>&nbsp;&nbsp;&nbsp;Online Version&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;Forward to a Friend</span>
            </div>
            <!--logo-->
            <div class="logon">
                <span class="logon_left">
                    <img src="./oneimg/Logo.png">
                </span>
                <span class="logon_right">
                    November 06
                </span>
            </div>
            <!--body-->
            <div class="body">
                <div class="body_text">
                    <div class="text_title">Free Newsletter <br> Template</div>
                    <div class="text_info">lorem ipsum dolor sit amet,consecetur <br>
                        adipiscing elit. Cars et orci ac eros elementum <br>
                        egestas ac non nibh quisqueu
                    </div>
                    <div class="text_button">
                        <a href="#"><img src="./oneimg/Button.png"></a>
                    </div>
                </div>
                <div class="body_img">
                    <img src="./oneimg/Image.png">
                </div>
            </div>
        </div>
   </div>
</template>

<script>
export default {
  components:{ 
    
  }
}
</script>
<style>
    
/*顶部导航*/
#Header .Header-nav{
    float: left;
    width: 960px;
    height: 36px;
    line-height: 36px;
    font-size: 15px;
    font-family: "Arial";
    vertical-align: middle;
    color: rgb(133, 172, 179);
    background-color: rgb(40, 59, 70);
}
#Header .Header-nav .t_left{
    float: left;
    padding-left:30px; 
}
#Header .Header-nav .t_left a{
    color: rgb(133, 172, 179);
}
#Header .Header-nav .t_right{
    float: right;
    padding-right:30px; 
}
/*顶部logo*/
#Header .logon{
    float: left;
    width: 960px;
    height: 105px;
    line-height: 105px;
    vertical-align: middle;
    background-color: rgb(57, 75, 88);
}
#Header .logon .logon_left{
    float: left;
    padding-left:30px; 
}
#Header .logon .logon_right{
    float: right;
    padding-right:30px;
    font-family: "Arial";
    font-size: 18px; 
    color: rgb(156, 165, 172);
}
/*顶部主题*/
#Header .body{
    float: left;
    width: 960px;
    height: 400px;
    padding-top:35px;
    background-color: #DBDBDB;
    display: flex;
    justify-content: space-between;
}
#Header .body .body_text{
    width: 50%;
    padding-left:30px;
    margin-top:30px; 
}
#Header .body .body_text .text_title{
    font-size: 40px;
    font-family: "Trebuchet MS";
    color: rgb(40, 108, 158);
    font-weight: bold;  
}
#Header .body .body_img{
    width: 50%;
}
#Header .body .body_text .text_info{
    font-size: 16px;
    font-family: "Arial";
    margin-top:19px;
    color: rgb(102, 116, 125);
}
#Header .body .body_text .text_button a img{
    width: 200px;
    height: 45px;
    margin-top:50px;
}
</style>
